<template>
    <el-card class="card-bottom"></el-card>
    <el-card>
        <p style="font-size: 18px;">操作日志</p>
        <el-divider></el-divider>
        <el-table :header-cell-style="{ background: '#FFFFFF', color: '#000000' }" :data="dataInfo.logData" stripe
            style="width: 100%">
            <el-table-column type="selection" />
            <el-table-column fixed align="center" prop="logId" label="ID" />
            <el-table-column fixed width="150" align="center" prop="userId" label="管理员ID" />
            <el-table-column fixed width="150" align="center" prop="username" label="管理员用户名" />
            <el-table-column width="150" align="center" prop="ip" label="IP" />
            <el-table-column width="200" align="center" prop="uri" label="请求uri" />
            <el-table-column width="150" align="center" prop="module" label="操作所属模块" />
            <el-table-column width="200" align="center" prop="details" show-overflow-tooltip label="操作详细内容" />
            <el-table-column width="200" align="center" prop="content" label="操作内容" />
            <el-table-column width="200" align="center" prop="email" label="是否异常" />
            <el-table-column width="200" align="center" prop="exceptionDetails" show-overflow-tooltip label="异常描述" />
            <el-table-column width="200" align="center" prop="createTime" label="操作时间" />
        </el-table>
        <Pagination 
        :total="dataInfo.totalSize" 
        @changeHandler="changeHandler" />
    </el-card>
</template>

<script setup>

import { getOperatorLogPageList } from '@/api/operatorlog';
import { reactive } from 'vue';

import Pagination from '@/components/pagination/index.vue'

components: { Pagination }

const queryInfo = reactive({
    form: {
        userId: null,
        username: "",
        exceptionFlag: 0,
        // 当前第多少页
        pageNum: 1,
        // 每页显示条数
        pageSize: 10,
    }
})

const dataInfo = reactive({
    logData: [],
    totalSize: 0
})

const logList = async () => {
    const { data: res } = await getOperatorLogPageList(queryInfo.form)
    // console.log("结果：",res.content)
    // console.log("当前页码，当前第多少页：",res.pageNum)
    // console.log("数据总条数：",res.totalSize)
    // console.log("每页显示数据条数：",res.pageSize)
    // console.log("一共多少页：",res.totalPages)
    dataInfo.totalSize = res.totalSize
    dataInfo.logData = res.content
}
logList()

const changeHandler = (type,num) => {
    console.log(type)
    console.log(num)
    if (type === 'sizechange') {
        queryInfo.form.pageSize = num
        queryInfo.form.pageNum = 1
    }
    if (type === 'currentchange') {
        queryInfo.form.pageNum = num
    }
    logList()
}


</script>

<style lang="scss" scoped>
.card-bottom {
    height: 75px;
}

.page-info {
    margin-top: 20px;
    margin-bottom: 20px;
}
</style>